<template>
  <view>
    <view class="handlePeople"> 操作人：{{ userInfo.name }} </view>
    <view class="box">
      <view class="item">
        <view class="label">
          <text class="must">*</text>
          备注：
        </view>
        <view class="remark">
          <u--textarea v-model="remark" placeholder="请输入内容"></u--textarea>
        </view>
      </view>
      <view class="item">
        <view class="label flex-row justify-between">
          <text> 附件： </text>
          <u-icon name="plus-circle" size="18"></u-icon>
        </view>
        <view class="imgs">
          <u-upload
            class="flexBox"
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            :maxCount="6"
          ></u-upload>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <text class="must">*</text>
          提醒完成：
        </view>
        <view class="select" @tap="showDate = true">
          <u--input
            readonly
            v-model="start_time"
            placeholder="请选择时间"
            border="surround"
          ></u--input>
          <u-datetime-picker
            :show="showDate"
            mode="date"
            v-model="value1"
            @confirm="handleConfirm"
            @cancel="handleCloneConfirm"
          ></u-datetime-picker>
        </view>
      </view>
      <view class="item">
        <view class="label">
          <text class="must">*</text>
          指派给：
        </view>
        <view class="select" @tap="showPeople = true">
          <u--input
            readonly
            v-model="staffName"
            placeholder="请选择员工"
            border="surround"
          ></u--input>
          <u-picker
            @confirm="confirmStaff"
            @cancel="cancelStaff"
            :show="showPeople"
            :columns="columns"
            keyName="name"
          ></u-picker>
        </view>
      </view>
    </view>
    <view class="footer">
      <button @tap="confirm">确认</button>
    </view>
  </view>
</template>

<script>
import {
  getWorkerAllList,
  sidebarTaskWorkeList,
  workerTodo,
} from '@/config/api'
export default {
  data() {
    return {
      start_time: null,
      value1: Number(new Date()),
      fileList1: [],
      showDate: false,
      showPeople: false,
      columns: [],
      staffName: null,
      remark: null,
      list: [],
      to_userid: null,
      userInfo: {},
      id: null,
      userid:
        uni.getStorageSync('clientId') || 'wm5m8oBwAA9wbLmopjNxKRdo8ey5D3uA',
      fl_userid: uni.getStorageSync('UserId') || 'toney@ikedongli.com',
    }
  },
  async onLoad() {
    this.getWorkList()
    let arr = await getWorkerAllList()
    this.columns = [arr]
    arr.map((item) => {
      if (item.userid == this.fl_userid) this.id = item.id
    })
  },
  methods: {
    async confirm() {
      if (!this.remark) {
        uni.showToast({
          title: '请填写备注!',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.start_time) {
        uni.showToast({
          title: '请选择时间!',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      if (!this.to_userid) {
        uni.showToast({
          title: '请选择员工!',
          icon: 'none',
          duration: 1500,
        })
        return
      }

      let arr = this.fileList1.map((item) => {
        return item.url
      })
      await workerTodo({
        fl_userid: this.id,
        to_userid: this.to_userid,
        file_url: arr.join(','),
        remark: this.remark,
        start_time: this.start_time,
      })
      uni.showToast({
        title: '添加待办成功!',
        duration: 2000,
      })
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        })
      }, 1500)
    },
    async getWorkList() {
      const result = await sidebarTaskWorkeList()
      let obj = result.filter((item) => {
        return item.userid == this.fl_userid
      })[0]

      this.userInfo = {
        ...obj,
      }
    },
    confirmStaff(e) {
      console.log(e)
      this.to_userid = e.value[0].id
      this.staffName = e.value[0].name
      this.cancelStaff()
    },
    cancelStaff() {
      this.showPeople = false
    },
    handleConfirm(e) {
      const timeFormat = uni.$u.timeFormat
      let timeValue = timeFormat(e.value, 'yyyy-mm-dd')
      this.start_time = timeValue
      this.handleCloneConfirm()
    },
    handleCloneConfirm() {
      this.showDate = false
    },
    deletePic(event) {
      this.fileList1.splice(event.index, 1)
    },
    async afterRead(event) {
      var _this = this

      uni.uploadFile({
        url: 'https://fastdemo.165.busybiz.cn/api/common/upload', //接口地址
        // url: 'https://www.zhiyinglasses.cn/api/common/upload', //接口地址
        filePath: event.file.url,
        name: 'file', //后台对应的参数名
        success: (res) => {
          var result = JSON.parse(res.data)
          _this.fileList1.push({
            name: event.file.name,
            size: event.file.size,
            thumb: result.data.fullurl,
            type: 'image',
            url: result.data.fullurl,
          })
        },
        fail(err) {
          console.log(err, '接口调用失败')
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.handlePeople,
.box {
  background: #fff;
  margin: 16rpx 28rpx;
  border-radius: 8rpx;
  padding: 0 28rpx;
}
.handlePeople {
  color: #5a6062;
  height: 72rpx;
  line-height: 72rpx;
}
.box {
  padding: 28rpx;
  .item:last-child {
    margin-bottom: 0;
  }
  .item {
    margin-bottom: 28rpx;
    .label {
      margin-bottom: 8rpx;
      color: #5a6062;
      .must {
        color: red;
      }
    }
    /deep/ .u-textarea {
      background: #f6f6f7;
      border-radius: 8rpx;
    }
    .select {
      /deep/ .u-input.u-border.u-input--radius.u-input--square {
        border: 1rpx solid #9999a5;
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background: #fff;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: end;
  button {
    margin: 0;
    padding: 0;
    font-size: 28rpx;
    border-radius: 8rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
  }
  button::after {
    border: none;
  }
  button:first-child {
    background: #3c9cff;
    color: #fff;
    width: 140rpx;
  }
}
</style>
